﻿/// <summary>
/// Add a context menu to the treeview.
/// </summary>
/// <param type="json object" name="o">
/// json object with a function to determine whether the context menu should be displayed 
/// for a node and a list of menu items for the context menu.
/// </param>
/// <example>
///     $('#MyTreeView').data('tTreeView').addContextMenu({
/// 	    evaluateNode: function(treeview, node) {
/// 		    var nodeValue = treeview.getItemValue(node);
/// 		    return (nodeValue == 'editable');
/// 	    },
/// 	    menuItems: [{
/// 		        text: 'Edit',
/// 		        onclick: function(e) {
///                     alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
///                 }
/// 	        }, {
///                 separator: true
///             }, {
/// 		        text: 'Delete',
/// 		        onclick: function(e) {
///                     alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
///                 }
/// 	        }]
///     });
/// </example>

(function ($) {
    if ($.telerik.treeview != undefined) {
        var treeviewExtensions = {
            addContextMenu: function (o) {
                if (this._contextMenus == undefined) {
                    this._contextMenus = [];

                    // subscribe to the contextmenu event to show a contet menu
                    $('.t-in', this.element).live('contextmenu', function (e) {
                        //var treeview = $(e).data('tTreeView');
                        var treeview = $(this).parents('.t-treeview').data('tTreeView');

                        var span = $(this);


                        e.preventDefault();

                        // Remove any contect menus that are still being displayed.
                        var fx = $.telerik.fx.slide.defaults();
                        $('div#contextMenu').each(function (index) {
                            $.telerik.fx.rewind(fx, $(this).find('.t-group'), { direction: 'bottom' }, function () {
                                $(this).remove();
                            });
                        });

                        // the node for which the 'contextmenu' event has fired
                        var $node = span.closest('.t-item');

                        // default "slide" effect settings
                        /*var*/fx = $.telerik.fx.slide.defaults();

                        // Identify which context menu to use.
                        $.each(treeview._contextMenus, function (mdx, menu) {
                            // Does this context menu apply to this node?
                            if (menu.evaluateNode(treeview, $node) == true) {
                                var menuItems = '';
                                $.each(menu.menuItems, function (idx, item) {
                                    if (item.separator != undefined && item.separator == true) {
                                        menuItems += '<li class="t-item"><hr/></li>';
                                    }
                                    else {
                                        menuItems += '<li class="t-item"><a href="#" class="t-link">' + item.text + '</a></li>';
                                    }
                                });
                                if (menuItems.length > 0) {
                                    // context menu definition - markup and event handling
                                    var $contextMenu =
                                        $('<div class="t-animation-container" id="contextMenu">' +
                                            '<ul class="t-widget t-group t-menu t-menu-vertical" style="display:none">' +
                                                menuItems +
                                            '</ul>' +
                                        '</div>')
                                        .css( //positioning of the menu
                                        {
                                        position: 'absolute',
                                        left: (e.pageX + 10 - 90), // x coordinate of the mouse
                                        top: (e.pageY + 10)  // y coordinate of the mouse
                                    })
                                        .appendTo(document.body)
                                        .find('.t-item') // select the menu items
                                        .mouseenter(function () {
                                            // hover effect
                                            span.addClass('t-state-hover');
                                        })
                                        .mouseleave(function () {
                                            // remove the hover effect
                                            span.removeClass('t-state-hover');
                                        })
                                        .click(function (e) {
                                            e.preventDefault();
                                            var li = $(this);
                                            // dispatch the click
                                            $.each(menu.menuItems, function (idx, item) {
                                                if (item.text == li.text()) {
                                                    item.onclick({ item: li, treeview: treeview, node: $node });
                                                    $contextMenu.remove();
                                                    $(".t-treeview .t-link").removeClass('t-state-selected');
                                                    span.removeClass('t-state-hover');
                                                    span.addClass('t-state-selected');
                                                    return;
                                                }
                                            });
                                        })
                                        .end();

                                    // show the menu with animation
                                    $.telerik.fx.play(fx, $contextMenu.find('.t-group'), { direction: 'bottom' });

                                    // handle globally the click event in order to hide the context menu
                                    $(document).click(function (e) {
                                        // hide the context menu and remove it from DOM
                                        $.telerik.fx.rewind(fx, $contextMenu.find('.t-group'), { direction: 'bottom' }, function () {
                                            $contextMenu.remove();
                                        });
                                    });
                                }
                                return;
                            }
                        });
                    });
                }
                this._contextMenus.push(o);
            }
        };

        // Add the extensions to the treeview plugin.
        $.extend(true, $.telerik.treeview.prototype, treeviewExtensions);
    }

    $.telerikExtensionsIncluded = true;
})(jQuery);